<template>
  <div class="app-container table-container">
    <el-form ref="queryForm" :model="defaultAuditState" :inline="true" label-width="68px">
      <el-form-item label="审核状态">
        <el-select
          v-model="defaultAuditState.auditing"
          filterable
          placeholder="请选择审核状态"
          size="small"
          @change="changeAuditState"
        >
          <el-option v-for="(ky,val) in auditState" :key="ky" :label="ky" :value="val" />
        </el-select>
      </el-form-item>

      <el-form-item label="票务名称">
        <el-input
          v-model="defaultAuditState.tickName"
          filterable
          placeholder="请输入票务名称"
          size="small"
          @change="changeAuditState"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @cliclk="queryAudit">搜索</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="restart">重置</el-button>
      </el-form-item>

    </el-form>

    <!--        <span>请选择</span>-->
    <!--        <el-select  filterable placeholder="请选择票务信息" @change='getTictValue'>-->
    <!--            <el-option-->
    <!--                    v-for="item in tictData"-->
    <!--                    :key="item.code"-->
    <!--                    :label="item.name"-->
    <!--                    :value="item.name">-->
    <!--                {{item.name}}-->
    <!--            </el-option>-->
    <!--        </el-select>-->
    <el-table
      :data="auditData"
      size="mini"
      :header-cell-style="{background:'#e5ecf1',fontWeight: 'bold',textAlign: 'center'}"
      highlight-current-row
      border
      style="font-size: 16px;"
      @current-change="userChge"
    >
      <el-table-column prop="tictName" label="票务名称" min-width="70" />
      <el-table-column prop="tictCode" label="票务编码" min-width="50" />
      <el-table-column prop="tickKind" label="票务种类" min-width="50">
        <template slot-scope="scope">
          {{replaceOneDictionarCode(tictKindOption,scope.row.tictKind)}}
        </template>
      </el-table-column>
      <el-table-column prop="yardName" label="场地名称" min-width="50">
        <template slot-scope="scope">
          {{replaceOneDictionarCode(yardOptions,scope.row.yardName)}}
        </template>
      </el-table-column>
      <el-table-column prop="startShowTime" label="播出时期" min-width="50">
        <template slot-scope="scope">
          {{parseTime(scope.row.startShowTime)}}
        </template>
      </el-table-column>
      <el-table-column prop="commitUserName" label="提交人" min-width="50"/>
      <el-table-column prop="commitTime" label="提交时间" min-width="50">
        <template slot-scope="scope">
          {{parseTime(scope.row.commintTime)}}
        </template>
      </el-table-column>
      <el-table-column prop="commintTime" label="审核时间" min-width="50"/>
      <el-table-column prop="recedeTick" label="退票" min-width="50">
        <template slot-scope="scope">
          {{ scope.row.recedeTick === '100' ? '可退票' : '' }}
          {{ scope.row.recedeTick === '0' ? '不可退票' : '' }}
        </template>
      </el-table-column>
      <el-table-column prop="adr" label="审核状态" min-width="50">-->
        <template slot-scope="scope">
          {{scope.row.adr === 'NoSmt' ? '未提交': ''}}
          {{scope.row.adr === 'Review' ? '审核中': ''}}
          {{scope.row.adr === 'Pass' ? '通过': ''}}
          {{scope.row.adr === 'Deny' ? '拒绝': ''}}
        </template>
      </el-table-column>
      <el-table-column width="180" fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-check"
            @click="approved( scope.row )"
          >查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="left" class="pagination">
      <el-pagination
        background
        :current-page="auditPage.currentPage"
        :page-sizes="[10, 20, 30]"
        :page-size="auditPage.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="auditPage.totalElements"
        @size-change="userSize"
        @current-change="pgChge"
      />
    </el-row>
  </div>
</template>

<script>
import { getDataForSP, writePageInfo } from '../../../utils/webUtils.js'

export default {
  name: 'Hrom',
  components: {},
  data() {
    return {
      formAlignLeft: 'left',
      editBoxShow: false,
      addShow: false,
      editShow: false,
      pwdShow: false,
      userSchOn: '',
      userEdit: false,
      uuid: '',
      auditData: [],
      tictKindOption:[],
      yardOptions:[],
      auditPage: {
        pageSize: 10, // 每页显示条目个数
        currentPage: 1, // 当前页数
        totalElements: 0,
        searchData: {
          adr: '',
          tickName: ''
        }
      },
      auditState: { Review: '审核中', Pass: '通过', Deny: '拒绝','':'全部' },
      defaultAuditState: {
        auditing: '', // 默认审核中状态
        tickName: ''
      }
    }
  },
  mounted() {
    this.queryKinds()
    this.queryYard()
    // 默认展示审核中的数据
    this.queryAudit(this.defaultAuditState)
  },
  methods: {
    // 票务种类
    queryKinds() {
      this.axios
        .request({
          method: 'get',
          url: './kwp/kdi/para/code/TCK_KINDS',
          params: {}
        })
        .then(response => {
          this.tictKindOption = response.data.subParas
        })
        .catch(error => {
          console.log(error)
        })
    },
    // 查询场地
    queryYard() {
      this.axios
        .request({
          method: 'get',
          url: './ope/kdi/yard/search/findAllTree',
          params: {}
        })
        .then(response => {
          this.yardOptions = response.data[0].subs
        })
        .catch(error => {
          console.log(error)
        })
    },
    // 重置
    restart() {
      this.defaultAuditState.auditing = ''
      this.defaultAuditState.tickName = ''
      this.queryAudit(this.defaultAuditState)
    },
    // 查询
    changeAuditState() {
      this.queryAudit(this.defaultAuditState)
    },
    userChge(val) {
      if (this.userEdit) {
        this.uuid = val.uuid
      }
    },
    approved(val) {
      this.uuid=val.uuid,
        this.$router.push("/lookTict/"+this.uuid)
    },
    refused(val) {
      this.$confirm('确认拒绝 ' + val.salName + ' ?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.request({
          method: 'put',
          url: './tck/kdi/salan/adr/' + val.uuid,
          data: { adr: 'Deny' }
        }).then((response) => {
          console.log(response)
          this.$message({
            message: '已拒绝!',
            type: 'success'
          })
          this.queryAudit(this.defaultAuditState)
        }).catch(error => {
          console.log(error)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 获取所有数据
    queryAudit(param) {
      this.auditPage.searchData.adr = param.auditing
      this.auditPage.searchData.tickName = param.tickName
      this.axios.request({
        method: 'get',
        url: './tck/plan/ticketing-plan/listReview',
        params: getDataForSP(this.auditPage)
      }).then(response => {
        this.auditData = response.data.data
        writePageInfo(this.auditPage, response.data)
      }).catch(error => {
        console.log(response.data.msg)
      })
    },
    // 列表分页
    userSize: function(pageSize) {
      this.auditPage.pageSize = pageSize
      if (this.auditPage.currentPage === 1) {
        if (this.userSchOn !== '') {
          // this.userSearch();
        } else {
          this.queryAudit()
        }
      }
      this.auditPage.currentPage = 1
    },
    pgChge(currentPage) {
      this.auditPage.currentPage = currentPage
      this.queryAudit()
    }
  }
}
</script>

<style scoped lang="scss">
  @import "@/styles/table.scss";
  .app-container{
    .pagination{
      padding: 10px 0;
    }
  }

</style>
